<template>
	<view class="page_box">
		<view class="task_top flexRow">
			<view class="task_id">
				<view class="task_id_title">任务ID</view>
				<view class="task_id_num">{{task.taskListId}}</view>
			</view>
			<view class="task_integral">
				<view class="task_id_title">任务积分</view>
				<view class="task_id_num">{{task.task_integral}}分</view>
			</view>
		</view>
		<view class="task_require_box">
			<view class="task_require">
				<view class="task_id_title">任务要求</view>
				<view class="task_id_num">{{task.task_note}}</view>
			</view>
		</view>
		<view class="submit_img_box flexRow">
			<view class="submit_img_L" @tap="preImg">
				<view class="submit_img_title">任务样图</view>
				<image class="submit_img_L_bg" :src="task.img_url1" mode=""></image>
			</view>
			<view class="submit_img_R" @tap="addImg">
				<view class="submit_img_title">请上传截图</view>
				<image class="submit_img_add" src="/static/img/add_img.png" mode=""></image>
				<image class="submit_add_img" :src="imgUrl" mode=""></image>
			</view>
		</view>
		<view class="submit_btn" @tap="taskSubmit" v-if="imgUrl!=''">
			提交任务
		</view>
		<view class="task_btn" @tap="doTask" v-if="imgUrl==''">
			打开APP做任务
		</view>
		<view class="cancel_btn" @tap="abandonTask">
			放弃任务
		</view>
		<view class="check_course" @tap="checkCourse">
			*点击查看教程>>
		</view>
	</view>
</template>

<script>
	import request from "../../apiRequest/request.js"
	export default {
		data() {
			return {
				imgUrl: '',
				task: {},
				type: '',
				taskID: '',
				taskTeaching: {},
				needCancel: true
			}
		},
		onLoad(options) {
			this.type = options.type
			this.taskID = options.taskID
			this.task = uni.getStorageSync('taskObject');
			// this.taskTeaching = uni.getStorageSync('taskTeaching');
		},
		onUnload(){
			if(this.needCancel){
				request.cancelTask(this.task.did).then(res=>{
					console.log("onUnload:",res)
				}).catch(err=>{
					this.$unexpected(err)
				})
			}
		},
		methods: {
			checkCourse(){
				uni.navigateTo({
					url: "/pages/coursePage/coursePage"
				})
			},
			doTask(){
				
				if(uni.getSystemInfoSync().platform == 'android'){
					console.log(this.task.apk_open_url)
					plus.runtime.openURL(this.task.apk_open_url, function(res) {
					// plus.runtime.openURL("snssdk1128://aweme/detail/6831132134934203662", function(res) {	
						console.log(res)
						if(res){
							uni.showToast({
							    title: res.message,
								icon: 'none',
							    duration: 2000
							})
						}
					})
				}else{
					console.log('112222')
				}
				
			},
			preImg(){
				uni.previewImage({
					urls: [this.task.img_url1]
				})
			},
			addImg(){
				let that = this;
				uni.chooseImage({
					count: 1,
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						that.imgUrl = res.tempFilePaths[0]
				    }
				});
			},
			taskSubmit(){
				let that = this
				if(this.imgUrl ==''){
					return
				}
				uni.uploadFile({
					// url: 'http://106.13.139.181:6767/v1/user/task/complete',
					url: this.$baseUrl + 'v1/user/task/complete',
					filePath: this.imgUrl,
					name: 'files',
					formData: {
						'did': this.task.did
					},
					header:{
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						let resJson = JSON.parse(res.data)
						console.log(resJson)
						that.needCancel = false
						if(resJson.code=='200'){
							uni.showToast({
							    title: '提交成功',
								icon: 'none',
							    duration: 2000
							})
							// that.refreshTask()
						}else{
							uni.showToast({
							    title: resJson.msg,
								icon: 'none',
							    duration: 2000
							});
						}
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
					}
				});
			},
			refreshTask(){
				request.getTask(this.taskID,this.type).then(res=>{
					// uni.setStorageSync('taskObject', res.data)
					this.task = res.data
					this.imgUrl = ''
					console.log(res)
				}).catch(err=>{
					this.$unexpected(err)
				})
			},
			abandonTask(){
				let that = this;
				uni.showModal({
				    title: '',
				    content: '确认放弃任务？',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							uni.navigateBack()
							// request.cancelTask(that.task.did).then(res=>{
							// 	console.log(res)
								
							// }).catch(err=>{
							// 	that.$unexpected(err)
							// })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			}
		}
	}
</script>

<style>
page{
	background:rgba(248,248,248,1);
}	
.page_box{
	padding: 30rpx 20rpx 0 20rpx;
}
.task_top{
	margin-bottom: 30rpx;
	background:rgba(255,255,255,1);
}
.task_top>view{
	flex: 1;
	padding-left: 20rpx;
	padding-top: 22rpx;
	box-sizing: border-box;
}
.task_id{
	margin-right: 20rpx;
	height:120rpx;
	background:linear-gradient(-30deg,rgba(4,63,255,1),rgba(4,137,255,1));
	box-shadow:0 4rpx 10rpx 0 rgba(4,137,255,0.2);
	border-radius:10rpx;
}
.task_integral{
	height:120rpx;
	background:linear-gradient(-30deg,rgba(153,41,234,1),rgba(88,8,251,1));
	box-shadow:0 4rpx 10rpx 0 rgba(4,137,255,0.2);
	border-radius:10rpx;
}
.task_id_title{
	font-size:30rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	color:rgba(255,255,255,1);
	line-height:30rpx;
	margin-bottom: 10rpx;
}
.task_id_num{
	font-size:26rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	line-height:26rpx;
}
.task_require{
	min-height:120rpx;
	background:linear-gradient(-30deg,rgba(255,147,76,1),rgba(252,104,111,1));
	box-shadow:0 4rpx 10rpx 0 rgba(245,97,69,0.2);
	border-radius:10rpx;
	box-sizing: border-box;
	padding: 22rpx 20rpx 10rpx 20rpx;
	
}
.task_require_box{
	margin-bottom: 20rpx;
	background:rgba(255,255,255,1);
}
.submit_img_box>view{
	flex: 1;
	height: 400rpx;
	border-radius:10rpx;
	border: 2rpx dashed rgba(202,202,202,1);
	position: relative;
}
.submit_img_L{
	margin-right: 20rpx;
}
.submit_img_L image{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.submit_img_title{
	width: 100%;
	height:60rpx;
	line-height: 60rpx;
	background:rgba(238,238,238,1);
	font-size:26rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(67,67,67,1);
	text-align: center;
	position: absolute;
	top: 0;
	z-index: 1;
}
.submit_img_add{
	width: 50rpx;
	height: 50rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25rpx;
	margin-left: -25rpx;
}
.submit_btn,.task_btn,.cancel_btn{
	width:600rpx;
	height:100rpx;
	line-height: 100rpx;
	border-radius:10rpx;
	text-align: center;
	font-size:38rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	margin: 0 auto;
}
.task_btn{
	margin-top: 43rpx;
	background:rgba(242,58,58,1);
}
.submit_btn{
	background:rgba(253,202,32,1);
	margin-top: 43rpx;
}
.cancel_btn{
	background:rgba(170,170,170,1);
	margin-top: 30rpx;
	margin-bottom: 60rpx;
}
.check_course{
	font-size:24rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(4,137,255,1);
	line-height:24rpx;
	text-align: center;
}
.submit_add_img{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100;
	top: 0;
}
</style>
